<template>
	<view>
		<view class="tab">
			<view class="tabItem" :class="{'tabItem_active':tabIndex == index}" v-for="(item,index) in tabList"
				:key="index" @tap="switchTab(index)">{{item}}</view>
		</view>
		<view class="none" v-if="isPage && orderList.length == 0">
			<i class="iconfont iconquesheng"></i>
			<text>暂无商品，还有更多好货等着你噢~</text>
		</view>
		<view class="orderList" v-else>
			<CardOrder @event="styleclick" :options="item.order_type == 1 ? true : false" :order-no="item.order_sn"
				:order-status="item.orderTypeName" :order-pay="item.total_pay" :order-dis="item.coupon_price"
				:order-fare="item.express_money" v-for="(item,index) in orderList" :key="index">
				<CardMsg :item-id="val.goods_id" :src="val.image" :name="val.goods_name" :price="val.pay_price"
					:number="'×'+val.buy_num" v-for="(val,num) in item.item" :key="num" />
			</CardOrder>
			<uni-load-more v-if="orderList.length >= 8" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import CardMsg from "@/components/cardStyle/card-1.0.vue";
	import CardOrder from "@/components/cardStyle/o-card.vue";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			CardMsg,
			CardOrder,
			uniLoadMore
		},
		data() {
			return {
				tabIndex: 0, //选项卡索引
				tabList: ['全部', '待付款', '待发货', '待收货', '待评价'], //选项卡列表
				orderList: [], //订单列表
				page: 1,
				reload: true,
				isPage: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onPullDownRefresh() {
			this.publicFunc();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getOrder();
			}, 500);
		},
		onShow() {
			this.publicFunc();
		},
		onLoad(e) {
			if (e.type) {
				this.tabIndex = e.type;
			}
		},
		methods: {
			// 获取订单列表
			getOrder() {
				if (this.page == 1) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
				}
				var data = {
					page: this.page,
					order_type: this.tabIndex
				}
				this.$shopApi.apiPost('font/order/infos',data).then(res => {
					if (res.data.code == 200 && res.data.data.list && res.data.data.list.length > 0) {
						var list = res.data.data.list;
						this.orderList.forEach((item, index) => {
							item.orderTypeName = item.order_type == 1 ? '待付款' : item.order_type == 2 ?'待发货' : item.order_type == 3 ?
								'待收货' : item.order_type == 4 ? '待评价' : '未知状态';
						})
						this.orderList = this.reload ? list : this.orderList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.orderList = [];
							this.isPage = true;
						} else {
							this.status = 'noMore';
						}
					}
					uni.hideLoading();
				})
			},
			// 公用方法
			publicFunc() {
				this.page = 1;
				this.reload = true;
				this.isPage = false;
				this.orderList = [];
				this.getOrder();
			},
			// 切换选项卡
			switchTab(index) {
				if (this.tabIndex != index) {
					this.tabIndex = index;
					this.publicFunc();
				}
			}
		}
	}
</script>

<style>
	.orderList {
		margin-top: 116upx;
	}

	.card_style_order__container {
		margin-top: 20upx;
	}
</style>
